<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 多种情况下,this的指向不一样
        // this的指向永远都是在调用函数的那一刻才知道!!!


        // 1.普通函数 ~ 指向window
        function fn(){
            console.log(this);
        }
        fn()

        // 2.普通对象方法 ~ 指向对象本身
        let obj = {
            name:'张三',
            age:18,
            sayHi:function(){
                console.log(this);
            }
        }
        obj.sayHi()

        // 3.构造函数中的this指向 ~ 实例对象
        function Star(name,age){
            this.name =name;
            this.age = age;
            console.log(this);
        }
        let s1 = new Star('李四',20)

        // 4.原型方法中的this ~ 指向实例对象
        Star.prototype.sing = function(){
            console.log(this);
        }
        s1.sing()

        // 5.事件绑定中的this指向 ~ 事件源
        document.addEventListener('click',function(){
            console.log(this);
        })

        // 6.定时器,延时器里面的this指向 ~ window
        setTimeout(function(){
            console.log(this);
        },1000);

        // 7.箭头函数没有自己的this ,指向外层函数的this
        let obj2 = {
            name:'王五',
            age:18,
            sayHi:() => {
                console.log("箭头函数" + this);
            }
        }
        obj2.sayHi()
    </script>
</body>
</html>